<template>
  <div>
    <el-dialog
      class="dia_power"
      title="影响因素"
      :visible.sync="maintenanceShow"
      width="70%"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
    >
      <div style="padding: 0 0px" class="table_wrap">
        <el-table
          :data="jgtab"
          :current-page="currentPage"
          :pageSize="pageSize"
          :total="jgtab.length"
          @refresh-data="handleRefresh"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          @select="handleCheckBox"
          @select-all="handleSelectAll"
          ref="multipleTable"
        >
          <el-table-column
            show-overflow-tooltip
            type="selection"
            width="50"
            align="center"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            type="index"
            width="50"
            label="序号"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="因素名称"
            prop="influenceFactor"
          ></el-table-column>
          <el-table-column show-overflow-tooltip label="配置">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.specificValue"
                v-if="scope.$index == 0"
                style="width: 100px;"
                @input="editSpecificValue(scope.row)"
              ></el-input>
              <span v-if="scope.$index == 0">℃</span>
              <!-- <span v-if="scope.$index == 1">kW</span> -->
            </template></el-table-column
          >
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="influencingFactorSubmit"
            >确 定</el-button
          >
          <el-button @click="maintenanceShow = false">关 闭</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { influencingFactorSub } from "@/api/carNetworkInteraction/index.js";
import pagetable from "@/components/pagetable";
export default {
  data() {
    return {
      addArray: [],
      numericalVal: "",
      modifyShow: false,
      maintenanceShow: false,
      jgtab: [
        {
          influenceFactor: "温度",
          specificValue: "5"
        },
        // {
        //   influenceFactor: "桩容量",
        //   specificValue: ""
        // },
        {
          influenceFactor: "作息",
          specificValue: ""
        },
        {
          influenceFactor: "季节",
          specificValue: ""
        },
        {
          influenceFactor: "天气",
          specificValue: ""
        }
      ],
      table: [],
      SelectionArray: [], //批量删除
      pageSize: 20,
      currentPage: 1,
      total: 0,
      multipleSelection: []
    };
  },
  props: {
    dialogId: {
      type: String,
      default: ""
    }
  },
  components: { pagetable },
  mounted() {},
  methods: {
    //设置提交
    influencingFactorSubmit() {
      console.log(this.multipleSelection);
      console.log(this.dialogId);
      let newJgtab = this.multipleSelection.map(item => {
        return {
          groupId: this.dialogId,
          influenceFactor: item.influenceFactor,
          specificValue: item.specificValue
        };
      });
      console.log(newJgtab, "11111111111111");
      influencingFactorSub(newJgtab).then(res => {
        if (res.code == 200) {
          this.$message.success("提交成功");
          this.maintenanceShow = false;
        }
      });
    },
    modify(index, row) {
      this.modifyShow = true;
      this.numericalVal = row.value;
    },
    open(id, lists) {
      console.log(lists);
      this.multipleSelection = lists;
      this.maintenanceShow = true;
      this.$nextTick(() => {
        this.jgtab.forEach((item, index) => {
          this.$refs.multipleTable.toggleRowSelection(item, true);
        });
      });
      if (lists.length > 0) {
        this.$nextTick(() => {
          this.jgtab.forEach((item, index) => {
            this.$refs.multipleTable.toggleRowSelection(item, false);
          });
          this.jgtab.forEach((item, index) => {
            this.multipleSelection.forEach(item1 => {
              if (item.influenceFactor == item1.influenceFactor) {
                item.specificValue = item1.specificValue;
              }
            });
            if (
              this.multipleSelection.findIndex(
                v => v.influenceFactor == item.influenceFactor
              ) >= 0
            ) {
              this.$refs.multipleTable.toggleRowSelection(item, true);
            }
          });
          console.log("multipleSelection=", this.multipleSelection);
        });
      } else {
        this.jgtab = [
          {
            influenceFactor: "温度",
            specificValue: "5"
          },
          // {
          //   influenceFactor: "桩容量",
          //   specificValue: ""
          // },
          {
            influenceFactor: "作息",
            specificValue: ""
          },
          {
            influenceFactor: "季节",
            specificValue: ""
          },
          {
            influenceFactor: "天气",
            specificValue: ""
          }
        ];
      }
    },
    //该方法是单选时的方法
    handleCheckBox(rows, row) {
      if (
        this.multipleSelection.find(
          item => item.influenceFactor == row.influenceFactor
        )
      ) {
        //下面这个filter方法就是删除的方法
        this.multipleSelection = this.multipleSelection.filter(
          item => item.influenceFactor != row.influenceFactor
        );
      } else {
        this.multipleSelection.push(row);
      }
      console.log(this.multipleSelection, "111111");
    },
    //该方法是当页全选的方法
    handleSelectAll(rows) {
      console.log(rows);
      if (rows.length) {
        rows.forEach(row => {
          if (
            !this.multipleSelection.find(
              item => item.influenceFactor == row.influenceFactor
            )
          ) {
            this.multipleSelection.push(row);
          }
        });
      } else {
        this.jgtab.forEach(row => {
          this.multipleSelection = this.multipleSelection.filter(
            item => item.influenceFactor != row.influenceFactor
          );
        });
      }
    },
    editSpecificValue(row) {
      console.log(row, "1111");
      this.multipleSelection.forEach(item => {
        if (row.influenceFactor == item.influenceFactor) {
          item.specificValue = row.specificValue;
        }
      });
    },
    handleSelectionVoucherChange(val) {
      this.addArray = val;
      console.log(this.addArray, "111111");
    },
    // 分页点击事件
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleRefresh() {
      this.currentPage = 1;
    }
  }
};
</script>
<style lang="scss" scoped>
// /deep/ .el-tooltip {
//   width: 250px !important;
// }
.di {
  z-index: 9;
  // position: fixed;
  width: 100%;
  bottom: 0px;
  background: #f7f7f7;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  line-height: 25px;
  border-top: 1px solid #bcbcbc;
}

.refresh_ {
  border-color: #f3f3f3;
  height: 28px;
  width: 40px;
  margin-left: 10px;
  box-sizing: border-box;
  padding-left: 12px;
}
</style>
